<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语口语交换 - 技能详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 60px;
            height: 3px;
            background-color: #10b981;
        }
        
        .skill-gallery {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .main-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
        
        .thumbnail-images {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            overflow-x: auto;
            padding-bottom: 8px;
        }
        
        .thumbnail-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            cursor: pointer;
            opacity: 0.8;
            transition: all 0.3s ease;
        }
        
        .thumbnail-image:hover, .thumbnail-image.active {
            opacity: 1;
            transform: scale(1.05);
            border: 2px solid #10b981;
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .user-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-info h5 {
            margin: 0;
            font-weight: 600;
        }
        
        .user-rating {
            color: #f59e0b;
            font-size: 0.875rem;
        }
        
        .skill-tag {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        .action-btn {
            transition: all 0.2s ease;
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #64748b;
            font-size: 0.875rem;
        }
        
        .stat-item i {
            color: #10b981;
        }
        
        .tab-content {
            padding: 2rem 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .nav-tabs .nav-link {
            color: #64748b;
            border: none;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
        }
        
        .nav-tabs .nav-link.active {
            color: #10b981;
            border-bottom: 3px solid #10b981;
        }
        
        .nav-tabs {
            border-bottom: 1px solid #e2e8f0;
        }
        
        .message-item {
            padding: 1.5rem 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .message-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .message-content {
            margin-left: 16px;
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .message-author {
            font-weight: 600;
        }
        
        .message-time {
            color: #64748b;
            font-size: 0.75rem;
        }
        
        .message-text {
            margin-bottom: 8px;
        }
        
        .message-actions {
            display: flex;
            gap: 16px;
            font-size: 0.875rem;
        }
        
        .message-action {
            color: #64748b;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .message-action:hover {
            color: #10b981;
        }
        
        .reply-form {
            margin-top: 1rem;
            display: none;
        }
        
        .reply-form.show {
            display: block;
        }
        
        .replies {
            margin-left: 40px;
            margin-top: 1rem;
        }
        
        .reply-item {
            padding: 1rem 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .similar-skill {
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .similar-skill:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        
        .similar-skill img {
            width: 100%;
            height: 140px;
            object-fit: cover;
        }
        
        .similar-skill .card-body {
            padding: 1rem;
        }
        
        .similar-skill h6 {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .exchange-badge {
            position: absolute;
            top: 12px;
            left: 12px;
        }
        
        .favorite-btn.active {
            color: #ef4444;
        }
        
        @media (max-width: 768px) {
            .main-image {
                height: 250px;
            }
            
            .thumbnail-image {
                width: 60px;
                height: 60px;
            }
            
            .action-buttons {
                flex-direction: column;
                gap: 0.5rem !important;
            }
            
            .action-btn {
                width: 100%;
            }
            
            .replies {
                margin-left: 20px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-exchange-alt"></i>
                <span>技能交换平台</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">技能交换</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发现达人</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">我的交换</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-light">
                        <i class="fas fa-bell"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的技能</a></li>
                            <li><a class="dropdown-item" href="#">消息</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-5">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#" class="text-success">首页</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-success">技能交换</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-success">语言学习</a></li>
                <li class="breadcrumb-item active" aria-current="page">英语口语交换</li>
            </ol>
        </nav>

        <div class="row">
            <!-- 左侧技能详情 -->
            <div class="col-lg-8">
                <!-- 技能标题 -->
                <h1 class="mb-3">英语口语交换</h1>
                
                <!-- 技能标签 -->
                <div class="mb-4">
                    <span class="badge skill-tag bg-primary">语言学习</span>
                    <span class="badge skill-tag bg-secondary">英语</span>
                    <span class="badge skill-tag bg-secondary">口语</span>
                    <span class="badge skill-tag bg-secondary">中文</span>
                    <span class="badge skill-tag bg-info">北京</span>
                    <span class="badge skill-tag bg-info">可线上</span>
                </div>
                
                <!-- 技能图片展示 -->
                <div class="skill-gallery mb-6">
                    <span class="badge bg-success exchange-badge">热门</span>
                    <img src="https://picsum.photos/id/20/1200/800" alt="英语口语练习场景" class="main-image" id="mainImage">
                    <div class="thumbnail-images">
                        <img src="https://picsum.photos/id/20/300/300" alt="英语口语练习场景" class="thumbnail-image active" data-img="https://picsum.photos/id/20/1200/800">
                        <img src="https://picsum.photos/id/21/300/300" alt="英语学习资料" class="thumbnail-image" data-img="https://picsum.photos/id/21/1200/800">
                        <img src="https://picsum.photos/id/22/300/300" alt="英语角活动" class="thumbnail-image" data-img="https://picsum.photos/id/22/1200/800">
                        <img src="https://picsum.photos/id/23/300/300" alt="英语书籍" class="thumbnail-image" data-img="https://picsum.photos/id/23/1200/800">
                    </div>
                </div>
                
                <!-- 技能提供者信息和操作按钮 -->
                <div class="d-flex flex-wrap justify-content-between align-items-center mb-8 gap-4">
                    <div class="user-profile">
                        <img src="https://picsum.photos/id/1012/100/100" alt="陈明的头像" class="user-avatar">
                        <div class="user-info">
                            <h5>陈明</h5>
                            <div class="user-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <span class="ms-1 text-muted">(4.8, 126条评价)</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons d-flex gap-2">
                        <button class="btn btn-outline-success action-btn">
                            <i class="fas fa-comment me-1"></i> 联系TA
                        </button>
                        <button class="btn btn-success action-btn">
                            <i class="fas fa-handshake me-1"></i> 申请交换
                        </button>
                        <button class="btn btn-outline-secondary action-btn favorite-btn">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="btn btn-outline-secondary action-btn">
                            <i class="fas fa-share-alt"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 技能详情标签页 -->
                <ul class="nav nav-tabs mb-0" id="skillTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">技能详情</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="exchange-tab" data-bs-toggle="tab" data-bs-target="#exchange" type="button" role="tab" aria-controls="exchange" aria-selected="false">交换要求</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="experience-tab" data-bs-toggle="tab" data-bs-target="#experience" type="button" role="tab" aria-controls="experience" aria-selected="false">过往经验</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">留言讨论 <span class="badge bg-success">87</span></button>
                    </li>
                </ul>
                
                <div class="tab-content" id="skillTabsContent">
                    <!-- 技能详情 -->
                    <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                        <h3 class="mb-3">我能提供</h3>
                        <p class="mb-4">英语专业毕业，TEM-8水平，现从事翻译工作5年，拥有丰富的口语教学经验。擅长日常交流、商务英语和旅游英语，发音标准，耐心细致。</p>
                        
                        <h3 class="mb-3">我想学习</h3>
                        <p class="mb-4">希望找到中文母语者练习日常对话，提升中文表达能力和文化理解。特别是日常交流和成语运用方面，希望能得到指导。</p>
                        
                        <h3 class="mb-3">交换方式</h3>
                        <p class="mb-4">线上：每周2-3次视频通话，每次1小时左右，一半时间练习英语，一半时间练习中文。<br>
                        线下：北京市朝阳区可见面交流，咖啡馆或图书馆等公共场合。</p>
                        
                        <h3 class="mb-3">适合人群</h3>
                        <p>英语基础薄弱，想提升口语能力的初学者；<br>
                        有一定基础但缺乏开口勇气的学习者；<br>
                        准备出国旅游、留学或工作需要提升英语的人。</p>
                        
                        <div class="mt-6">
                            <h3 class="mb-3">技能数据</h3>
                            <div class="d-flex flex-wrap gap-4">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>浏览量: 2,543</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-heart"></i>
                                    <span>收藏: 342</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-handshake"></i>
                                    <span>成功交换: 28</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-clock"></i>
                                    <span>发布时间: 3天前</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>位置: 北京市朝阳区</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 交换要求 -->
                    <div class="tab-pane fade" id="exchange" role="tabpanel" aria-labelledby="exchange-tab">
                        <h3 class="mb-3">交换条件</h3>
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>中文母语者，发音标准清晰</span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>能够坚持定期交流，每周至少1-2次</span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>有耐心，乐于互相纠正错误</span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>尊重文化差异，友善交流</span>
                            </li>
                        </ul>
                        
                        <h3 class="mb-3">准备工作</h3>
                        <p class="mb-4">初次交流前请准备一个简短的自我介绍，包括你的兴趣爱好和学习目标。我们可以根据你的需求制定简单的学习计划，让交换更有针对性。</p>
                        
                        <h3 class="mb-3">注意事项</h3>
                        <p>请准时参加约定的交流时间，如不能参加请提前至少2小时告知。交流过程中请保持礼貌和耐心，互相尊重。</p>
                    </div>
                    
                    <!-- 过往经验 -->
                    <div class="tab-pane fade" id="experience" role="tabpanel" aria-labelledby="experience-tab">
                        <h3 class="mb-4">我的教学经验</h3>
                        
                        <div class="mb-6">
                            <h5>英语家教 (2018-至今)</h5>
                            <p class="mb-2">为不同年龄段的学生提供英语家教服务，包括儿童、青少年和成人，主要提升口语表达能力。</p>
                            <div class="d-flex gap-2 flex-wrap mb-3">
                                <span class="badge bg-light text-dark">儿童英语</span>
                                <span class="badge bg-light text-dark">成人英语</span>
                                <span class="badge bg-light text-dark">口语训练</span>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h5>企业英语培训 (2020-2022)</h5>
                            <p class="mb-2">为多家企业提供商务英语培训，专注于商务谈判和职场沟通场景的英语表达。</p>
                            <div class="d-flex gap-2 flex-wrap mb-3">
                                <span class="badge bg-light text-dark">商务英语</span>
                                <span class="badge bg-light text-dark">职场沟通</span>
                                <span class="badge bg-light text-dark">企业培训</span>
                            </div>
                        </div>
                        
                        <h3 class="mb-4">成功案例</h3>
                        
                        <div class="card mb-4">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1027/50/50" alt="王同学头像" class="rounded-circle" width="40" height="40">
                                    <div>
                                        <h6 class="mb-0">王同学 - 留学生</h6>
                                        <p class="text-sm text-muted mb-0">通过6个月交换，成功通过雅思口语考试</p>
                                    </div>
                                </div>
                                <p class="card-text text-sm">"陈明老师非常有耐心，针对我的薄弱环节进行训练，6个月的时间里我的口语有了明显提升，最终雅思口语拿到了7.5分，非常感谢！"</p>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1066/50/50" alt="李女士头像" class="rounded-circle" width="40" height="40">
                                    <div>
                                        <h6 class="mb-0">李女士 - 职场人士</h6>
                                        <p class="text-sm text-muted mb-0">商务英语交流能力提升</p>
                                    </div>
                                </div>
                                <p class="card-text text-sm">"因为工作需要经常和外国客户沟通，通过和陈明的定期交流，我的商务英语表达更加流利自信，客户反馈也越来越好。"</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 留言讨论 -->
                    <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
                        <!-- 留言输入框 -->
                        <div class="mb-6">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/id/1005/50/50" alt="当前用户头像" class="rounded-circle" width="48" height="48">
                                <div class="flex-grow-1">
                                    <textarea class="form-control" rows="3" placeholder="分享你的想法或问题..."></textarea>
                                    <div class="d-flex justify-content-end mt-2">
                                        <button class="btn btn-success">发布留言</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 留言列表 -->
                        <div class="messages-list">
                            <!-- 留言1 -->
                            <div class="message-item d-flex">
                                <img src="https://picsum.photos/id/1025/50/50" alt="留言者头像" class="message-avatar">
                                <div class="message-content flex-grow-1">
                                    <div class="message-header">
                                        <span class="message-author">李小华</span>
                                        <span class="message-time">2天前</span>
                                    </div>
                                    <div class="message-text">
                                        <p>你好，我是一名大学生，英语基础一般，想提高口语能力，准备明年出国留学。请问你现在还在找交换伙伴吗？我可以教你中文，我的普通话很标准。</p>
                                    </div>
                                    <div class="message-actions">
                                        <span class="message-action"><i class="far fa-heart me-1"></i> 点赞 (12)</span>
                                        <span class="message-action reply-btn"><i class="far fa-comment me-1"></i> 回复</span>
                                    </div>
                                    
                                    <!-- 回复框 -->
                                    <div class="reply-form">
                                        <div class="d-flex gap-2 mt-2">
                                            <img src="https://picsum.photos/id/1005/50/50" alt="当前用户头像" class="rounded-circle" width="36" height="36">
                                            <div class="flex-grow-1">
                                                <textarea class="form-control" rows="2" placeholder="回复 @李小华..."></textarea>
                                                <div class="d-flex justify-content-end mt-1 gap-2">
                                                    <button class="btn btn-sm btn-outline-secondary cancel-reply">取消</button>
                                                    <button class="btn btn-sm btn-success">回复</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 回复列表 -->
                                    <div class="replies">
                                        <!-- 作者回复 -->
                                        <div class="reply-item d-flex">
                                            <img src="https://picsum.photos/id/1012/50/50" alt="作者头像" class="message-avatar" style="width: 36px; height: 36px;">
                                            <div class="message-content flex-grow-1">
                                                <div class="message-header">
                                                    <span class="message-author text-success">陈明 <span class="badge bg-success bg-opacity-20 text-success text-xs">作者</span></span>
                                                    <span class="message-time">1天前</span>
                                                </div>
                                                <div class="message-text">
                                                    <p>你好！还在找的，你的情况很合适。我可以帮你准备留学相关的口语训练，特别是日常生活和学术场景的表达。我们可以先加个好友详细聊聊？</p>
                                                </div>
                                                <div class="message-actions">
                                                    <span class="message-action"><i class="far fa-heart me-1"></i> 点赞 (5)</span>
                                                    <span class="message-action reply-btn"><i class="far fa-comment me-1"></i> 回复</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 其他用户回复 -->
                                        <div class="reply-item d-flex">
                                            <img src="https://picsum.photos/id/1025/50/50" alt="回复者头像" class="message-avatar" style="width: 36px; height: 36px;">
                                            <div class="message-content flex-grow-1">
                                                <div class="message-header">
                                                    <span class="message-author">李小华</span>
                                                    <span class="message-time">1天前</span>
                                                </div>
                                                <div class="message-text">
                                                    <p>好的，那太好了！我已经申请加你为好友了，麻烦通过一下~</p>
                                                </div>
                                                <div class="message-actions">
                                                    <span class="message-action"><i class="far fa-heart me-1"></i> 点赞 (2)</span>
                                                    <span class="message-action reply-btn"><i class="far fa-comment me-1"></i> 回复</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 留言2 -->
                            <div class="message-item d-flex">
                                <img src="https://picsum.photos/id/1074/50/50" alt="留言者头像" class="message-avatar">
                                <div class="message-content flex-grow-1">
                                    <div class="message-header">
                                        <span class="message-author">张小明</span>
                                        <span class="message-time">3天前</span>
                                    </div>
                                    <div class="message-text">
                                        <p>请问你们一般是怎么进行交换学习的？有固定的教材或者话题吗？我也想找个伙伴练习英语，但不知道该怎么开始。</p>
                                    </div>
                                    <div class="message-actions">
                                        <span class="message-action"><i class="far fa-heart me-1"></i> 点赞 (8)</span>
                                        <span class="message-action reply-btn"><i class="far fa-comment me-1"></i> 回复</span>
                                    </div>
                                    
                                    <!-- 回复框 -->
                                    <div class="reply-form">
                                        <div class="d-flex gap-2 mt-2">
                                            <img src="https://picsum.photos/id/1005/50/50" alt="当前用户头像" class="rounded-circle" width="36" height="36">
                                            <div class="flex-grow-1">
                                                <textarea class="form-control" rows="2" placeholder="回复 @张小明..."></textarea>
                                                <div class="d-flex justify-content-end mt-1 gap-2">
                                                    <button class="btn btn-sm btn-outline-secondary cancel-reply">取消</button>
                                                    <button class="btn btn-sm btn-success">回复</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 回复列表 -->
                                    <div class="replies">
                                        <!-- 作者回复 -->
                                        <div class="reply-item d-flex">
                                            <img src="https://picsum.photos/id/1012/50/50" alt="作者头像" class="message-avatar" style="width: 36px; height: 36px;">
                                            <div class="message-content flex-grow-1">
                                                <div class="message-header">
                                                    <span class="message-author text-success">陈明 <span class="badge bg-success bg-opacity-20 text-success text-xs">作者</span></span>
                                                    <span class="message-time">3天前</span>
                                                </div>
                                                <div class="message-text">
                                                    <p>我们通常会根据对方的水平和需求来定制内容，初期可以从日常话题开始，比如兴趣爱好、工作学习等。如果有特定目标（如旅游、留学），可以针对性练习。我会准备一些话题和常用表达，也鼓励对方准备中文学习的内容。</p>
                                                </div>
                                                <div class="message-actions">
                                                    <span class="message-action"><i class="far fa-heart me-1"></i> 点赞 (3)</span>
                                                    <span class="message-action reply-btn"><i class="far fa-comment me-1"></i> 回复</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 留言3 -->
                            <div class="message-item d-flex">
                                <img src="https://picsum.photos/id/1062/50/50" alt="留言者头像" class="message-avatar">
                                <div class="message-content flex-grow-1">
                                    <div class="message-header">
                                        <span class="message-author">王芳</span>
                                        <span class="message-time">5天前</span>
                                    </div>
                                    <div class="message-text">
                                        <p>我之前和陈明交换过一段时间，他的英语非常好，讲解也很耐心，我的口语进步很明显！推荐大家试试~</p>
                                    </div>
                                    <div class="message-actions">
                                        <span class="message-action"><i class="far fa-heart me-1"></i> 点赞 (24)</span>
                                        <span class="message-action reply-btn"><i class="far fa-comment me-1"></i> 回复</span>
                                    </div>
                                    
                                    <!-- 回复框 -->
                                    <div class="reply-form">
                                        <div class="d-flex gap-2 mt-2">
                                            <img src="https://picsum.photos/id/1005/50/50" alt="当前用户头像" class="rounded-circle" width="36" height="36">
                                            <div class="flex-grow-1">
                                                <textarea class="form-control" rows="2" placeholder="回复 @王芳..."></textarea>
                                                <div class="d-flex justify-content-end mt-1 gap-2">
                                                    <button class="btn btn-sm btn-outline-secondary cancel-reply">取消</button>
                                                    <button class="btn btn-sm btn-success">回复</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 分页 -->
                        <nav class="mt-6 d-flex justify-content-center">
                            <ul class="pagination">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                <li class="page-item"><a class="page-link" href="#">5</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            
            <!-- 右侧边栏 -->
            <div class="col-lg-4">
                <!-- 技能提供者其他技能 -->
                <div class="card mb-6">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">TA的其他技能</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex flex-column gap-3">
                            <a href="#" class="text-decoration-none">
                                <div class="d-flex gap-3">
                                    <img src="https://picsum.photos/id/42/100/100" alt="商务英语写作" class="rounded" width="70" height="70" object-fit="cover">
                                    <div>
                                        <h6 class="text-dark mb-1">商务英语写作</h6>
                                        <p class="text-sm text-muted mb-0">帮你提升商务邮件和报告写作能力</p>
                                    </div>
                                </div>
                            </a>
                            <div class="border-top"></div>
                            <a href="#" class="text-decoration-none">
                                <div class="d-flex gap-3">
                                    <img src="https://picsum.photos/id/43/100/100" alt="翻译技巧分享" class="rounded" width="70" height="70" object-fit="cover">
                                    <div>
                                        <h6 class="text-dark mb-1">翻译技巧分享</h6>
                                        <p class="text-sm text-muted mb-0">分享笔译和口译的实用技巧</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="card-footer bg-white text-center">
                        <a href="#" class="text-success">查看全部技能</a>
                    </div>
                </div>
                
                <!-- 相似技能推荐 -->
                <div class="card mb-6">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">相似技能推荐</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="row g-3 p-3">
                            <div class="col-6">
                                <a href="#" class="text-decoration-none">
                                    <div class="card similar-skill">
                                        <img src="https://picsum.photos/id/1058/300/200" alt="西班牙语交换" class="card-img-top">
                                        <div class="card-body p-2">
                                            <h6 class="text-dark">西班牙语交换</h6>
                                            <p class="text-xs text-muted">我教西语，想学中文</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="text-decoration-none">
                                    <div class="card similar-skill">
                                        <img src="https://picsum.photos/id/1071/300/200" alt="日语学习交换" class="card-img-top">
                                        <div class="card-body p-2">
                                            <h6 class="text-dark">日语学习交换</h6>
                                            <p class="text-xs text-muted">我教日语，想学韩语</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="text-decoration-none">
                                    <div class="card similar-skill">
                                        <img src="https://picsum.photos/id/1066/300/200" alt="法语学习交换" class="card-img-top">
                                        <div class="card-body p-2">
                                            <h6 class="text-dark">法语学习交换</h6>
                                            <p class="text-xs text-muted">我教法语，想学中文</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="text-decoration-none">
                                    <div class="card similar-skill">
                                        <img src="https://picsum.photos/id/1074/300/200" alt="英语口语练习" class="card-img-top">
                                        <div class="card-body p-2">
                                            <h6 class="text-dark">英语口语练习</h6>
                                            <p class="text-xs text-muted">英美留学归来，可陪练</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white text-center">
                        <a href="#" class="text-success">查看更多</a>
                    </div>
                </div>
                
                <!-- 交换小贴士 -->
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>交换小贴士</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>初次交流建议选择公共场合或视频通话</span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>提前明确交换目标和时间安排</span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>保持耐心，互相尊重，教学相长</span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                <span>如遇问题可向平台举报或寻求帮助</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-6">
                    <h5 class="mb-3">技能交换平台</h5>
                    <p class="text-muted">分享技能，结交朋友，共同成长</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">首页</a></li>
                        <li><a href="#" class="text-muted">技能交换</a></li>
                        <li><a href="#" class="text-muted">发现达人</a></li>
                        <li><a href="#" class="text-muted">发布技能</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">帮助中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">使用指南</a></li>
                        <li><a href="#" class="text-muted">常见问题</a></li>
                        <li><a href="#" class="text-muted">安全提示</a></li>
                        <li><a href="#" class="text-muted">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">发布新技能</h5>
                    <p class="text-muted mb-3">分享你的专长，找到合适的技能交换伙伴</p>
                    <button class="btn btn-success w-100">
                        <i class="fas fa-plus me-1"></i> 发布技能
                    </button>
                </div>
            </div>
            <div class="border-top border-gray-700 mt-6 pt-6 text-center text-muted">
                <p>&copy; 2023 技能交换平台 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 图片画廊切换功能
        document.querySelectorAll('.thumbnail-image').forEach(thumb => {
            thumb.addEventListener('click', function() {
                // 更新主图
                const mainImage = document.getElementById('mainImage');
                mainImage.src = this.getAttribute('data-img');
                
                // 更新缩略图活跃状态
                document.querySelectorAll('.thumbnail-image').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
        
        // 收藏按钮功能
        document.querySelector('.favorite-btn').addEventListener('click', function() {
            this.classList.toggle('active');
            const icon = this.querySelector('i');
            if (this.classList.contains('active')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
            }
        });
        
        // 留言回复功能
        document.querySelectorAll('.reply-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 关闭其他所有回复框
                document.querySelectorAll('.reply-form').forEach(form => {
                    form.classList.remove('show');
                });
                
                // 显示当前回复框
                const replyForm = this.closest('.message-content').querySelector('.reply-form');
                replyForm.classList.add('show');
                
                // 自动聚焦到文本框
                replyForm.querySelector('textarea').focus();
            });
        });
        
        // 取消回复功能
        document.querySelectorAll('.cancel-reply').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.reply-form').classList.remove('show');
            });
        });
        
        // 点击页面其他地方关闭回复框
        document.addEventListener('click', function(event) {
            if (!event.target.closest('.message-item') || event.target.closest('.cancel-reply')) {
                document.querySelectorAll('.reply-form').forEach(form => {
                    form.classList.remove('show');
                });
            }
        });
        
        // 点赞功能
        document.querySelectorAll('.message-action').forEach(action => {
            if (action.querySelector('.fa-heart')) {
                action.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-danger');
                        // 更新点赞数
                        const countText = this.textContent.trim();
                        const count = parseInt(countText.match(/\d+/)[0]);
                        this.innerHTML = `<i class="fas fa-heart me-1 text-danger"></i> 点赞 (${count + 1})`;
                    } else {
                        icon.classList.remove('fas', 'text-danger');
                        icon.classList.add('far');
                        // 更新点赞数
                        const countText = this.textContent.trim();
                        const count = parseInt(countText.match(/\d+/)[0]);
                        this.innerHTML = `<i class="far fa-heart me-1"></i> 点赞 (${count - 1})`;
                    }
                });
            }
        });
        
        // 图片懒加载
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = document.querySelectorAll("img");
            
            if ("IntersectionObserver" in window) {
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const image = entry.target;
                            image.classList.add('opacity-100');
                            image.classList.remove('opacity-0');
                            imageObserver.unobserve(image);
                        }
                    });
                });
                
                lazyImages.forEach(image => {
                    imageObserver.observe(image);
                    image.classList.add('transition-opacity', 'duration-500', 'opacity-0');
                });
            }
        });
    </script>
</body>
</html>
    
